<template>
  <div class="nav" v-loading="loading">
    <el-container style="height:100%;">
      <el-aside width="200px;" style="width:200px;">
        <el-row class="tac" style="height:100%;">
          <el-col style="height:100%;">
            <!-- @open="handleOpen"
            @close="handleClose"-->
            <el-menu
              router
              :default-active="activeIndex"
              @select="handleSelect"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#409eff"
              style="position: fixed;width: 200px;height:100%;"
            >
              <el-menu-item index="/Home" v-if="form.role === 'base_manager'">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>
              </el-menu-item>
              <el-menu-item index="/article" v-if="hasMenus('111')">
                <i class="el-icon-setting"></i>
                <span slot="title">资讯管理</span>
              </el-menu-item>
              <!-- <el-menu-item index="/Navigation">
                      <i class="el-icon-s-promotion"></i>
                      <span slot="title">导航管理</span>
              </el-menu-item>-->
              <el-menu-item index="/Addbase" v-if="hasMenus('112')">
                <i class="el-icon-house"></i>
                <span slot="title">基地管理</span>
              </el-menu-item>
              <el-menu-item index="/Slideshow" v-if="hasMenus('113')">
                <i class="el-icon-monitor"></i>
                <span slot="title">轮播图管理</span>
              </el-menu-item>
              <el-menu-item index="/leaveamessage" v-if="hasMenus('114')">
                <i class="el-icon-notebook-2"></i>
                <span slot="title">留言管理</span>
              </el-menu-item>
              <el-menu-item index="/Administratoradd" v-if="hasMenus('115')">
                <i class="el-icon-location-information"></i>
                <span slot="title">管理员管理</span>
              </el-menu-item>
              <el-menu-item index="/Signinsignoutone" v-if="isBaseManager()">
                <i class="el-icon-location-information"></i>
                <span slot="title">签到签退</span>
              </el-menu-item>
              <el-menu-item index="/Bookingmanagement" v-if="isBaseManager()">
                <i class="el-icon-monitor"></i>
                <span slot="title">预约管理</span>
              </el-menu-item>
              <!-- author : feizns -->
              <el-menu-item index="/statistics/school" v-if="hasMenus('116')">
                <i class="el-icon-notebook-2"></i>
                <span slot="title">学校统计</span>
              </el-menu-item>
              <el-menu-item index="/statistics/base" v-if="hasMenus('117')">
                <i class="el-icon-notebook-2"></i>
                <span slot="title">基地统计</span>
              </el-menu-item>
              <el-menu-item index="/statistics/module" v-if="hasMenus('118')">
                <i class="el-icon-notebook-2"></i>
                <span slot="title">模块统计</span>
              </el-menu-item>
              <el-menu-item index="/statistics/log" v-if="hasMenus('119')">
                <i class="el-icon-notebook-2"></i>
                <span slot="title">日志管理</span>
              </el-menu-item>
              <el-menu-item index="evaluate" v-if="isBaseManager()">
                <i class="el-icon-notebook-2"></i>
                <span slot="title">评价管理</span>
              </el-menu-item>
              <el-menu-item index="practice" v-if="isBaseManager()">
                <i class="el-icon-school"></i>
                <span slot="title">实践管理</span>
              </el-menu-item>
              <el-menu-item index="twodimensioncode" v-if="isBaseManager()">
                <i class="el-icon-s-grid"></i>
                <span slot="title">基地二维码</span>
              </el-menu-item>
              <el-menu-item index="/informationaggregationone" v-if="isBaseManager()">
                <i class="el-icon-s-management"></i>
                <span slot="title">信息汇总</span>
              </el-menu-item>
              <!-- <el-menu-item index="practice">
                      <i class="el-icon-notebook-2"></i>
                      <span slot="title">实践管理</span>
              </el-menu-item>-->
              <!-- <el-menu-item  v-if="hasMenus('102')">
                      <i class="el-icon-notebook-2"></i>
                      <span slot="title">平台统计</span>
                    </el-menu-item>
                    <el-menu-item  >
                      <i class="el-icon-notebook-2" v-if="hasMenus('103')"></i>
                      <span slot="title">区域统计</span>
                    </el-menu-item>
                    <el-menu-item  >
                      <i class="el-icon-notebook-2" v-if="hasMenus('104')"></i>
                      <span slot="title">日志管理</span>
              </el-menu-item>-->
              <!-- <el-submenu index="1">
                      <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>权限管理</span>
                      </template>
                      <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="/Administrator">管理员</el-menu-item>
                        <el-menu-item index="/Basemanager">数据统计</el-menu-item>
                      </el-menu-item-group>
              </el-submenu>-->
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header style="height:75px;">
          <div class="Top-left">
            <span class="el-icon-s-promotion"></span>
            <p>后台管理系统</p>
          </div>
          <div class="Top-right">
            <!-- <div class = "icon-news">
             <el-tooltip content="Bottom center" placement="bottom" effect="light">
              <el-button @click = "message" style="font-size:18px;" class = "el-icon-bell" ></el-button>
            </el-tooltip>
            </div>
            <el-badge :value="12" class="item">
              <el-button size="small">评论</el-button>
            </el-badge>-->
            <el-row style="float: right;">
              <el-col style="width:100%;line-height: 60px;">
                <el-dropdown trigger="click">
                  <span style="cursor:pointer;color:#fff;" class="el-dropdown-link">
                    <div
                      class="qwe"
                      style="display: flex;flex-flow: column;height: 100%;height: 100%;align-items: center;"
                    >
                      <img :src="form.headImage" alt />
                      <span style="line-height:20px;color:black">{{form.name}}</span>
                    </div>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="personal">个人中心</el-dropdown-item>
                    <el-dropdown-item @click.native="password">修改密码</el-dropdown-item>
                    <el-dropdown-item @click.native="quit">退出</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </div>
        </el-header>
        <transition name="slide-fade">
          <router-view></router-view>
        </transition>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  props: {
    Data: {
      type: Object,
      Data: {}
    }
  },
  // beforeRouteEnter (to, from, next) {
  //     next(vm => {
  //         // 通过 `vm` 访问组件实例
  //         vm.$router.replace('/Home')
  //     })
  //     console.log(this.form)
  // },
  data() {
    return {
      activeIndex: "",
      loading: false,
      form: {}
    };
  },
  watch: {
    $route() {
      this.handleSelect(this.activeIndex);
      if(this.$route.path === '/'){
        this.form = JSON.parse(sessionStorage.getItem("user"));
        this.Push(this.form.role)
      }
      if(this.$route.path == '/practice'){
        this.activeIndex = 'practice'
      }
    }
  },
  created() {
    this.loading = true;
    this.$nextTick(() => {
      let user = sessionStorage.getItem("userUnionId");
      this.$api.Loginlogout.user(user).then(res => {
        this.Push(res.data.role)
        sessionStorage.setItem("user", JSON.stringify(res.data));
        this.form = JSON.parse(sessionStorage.getItem("user"));
        this.loading = false;
      });
    });
  },
  methods: {
    //判断路由跳转
    Push(item){
        if (item === "admin") {
          this.$router.push("/article");
          this.activeIndex = "/article";
        } else {
          this.$router.push("/Home");
          this.activeIndex = "/Home";
        }
    },
    //个人中心
    personal() {
      this.$router.push("personalcenter");
    },
    // 修改密码
    password() {
      this.$router.push("/Changepassword");
    },
    //消息中心
    message() {},

    hasMenus(id) {
      if (this.form.menus) {
        return this.form.menus.indexOf(id) != -1;
      }
    },
    isBaseManager() {
      return this.form.role == "base_manager";
    },
    // 退出登录
    quit() {
      this.loading = true;
      this.$api.Loginlogout.logout()
        .then(res => {
          sessionStorage.removeItem("token");
          sessionStorage.removeItem("userUnionId");
          this.$router.push("/login");
          this.loading = false;
        })
        .catch(err => {
          sessionStorage.removeItem("token");
          sessionStorage.removeItem("userUnionId");
          this.loading = false;
          this.$router.push("/login");
        });
    },
    handleSelect(index) {
      this.activeIndex = index;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
<style scoped>
.nav {
  height: 100%;
}
.el-header,
.el-footer {
  color: #fff;
  /* background-color: #242f42; */
}
.el-header {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-header .Top-left {
  float: left;
}
.el-header .Top-left span {
  font-size: 30px;
  float: left;
  margin-top: 15px;
}
.el-header .Top-left .el-icon-s-promotion {
  margin-top: 22px;
  color: black;
}
.el-header .Top-left p {
  float: left;
  color: black;
  line-height: 75px;
  margin-left: 20px;
  font-size: 20px;
  font-weight: bold;
}
.el-header .Top-right {
  float: right;
}
.el-header .Top-right .icon-news {
  float: left;
  margin-right: 15px;
  line-height: 60px;
}
.el-header .Top-right .el-row .el-dropdown .qwe {
}
.el-header .Top-right .el-row .el-dropdown .qwe img {
  height: 45px;
  width: 45px;
  line-height: 30px;
  border-radius: 50%;
  margin-top: 7px;
  float: left;
}
.slide-fade {
  position: absolute;
  left: 0;
  right: 0;
}
.slide-fade-enter-active {
  transition: all 0.5s ease;
}
.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(2, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  left: 0;
  right: 0;
  transform: translateX(0px);
  opacity: 0;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
